<template>
  <div class="css2_7">
      <h1>2.7 CSS3动画</h1>
      <p>
        <pre>
          通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
          <h2>CSS3 @keyframes规则</h2>
          如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
动画实例：实现加载动画，一个顺时针一个逆时针，一个内部文字的透明度变化
HTML：
&lt;div class="box">
    &lt;div class="out-box">&lt;/div>
    &lt;div class="inner-box">&lt;/div>
    &lt;div class="text-box">loading&lt;/div>
&lt;/div>
分别定义div元素，类名为box,out-box,inner-box,text-box.
CSS:
{
    padding:0;
    margin:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
box-sizing:border-box;怪异盒模型，主要设置它的边框。

.box {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fdfaf5;
}
position:fixed;实现头部，底部模块定位。

.out-box {
    width:150px;
    height:150px;
    border-top:4px solid #e0787f;
    border-right:4px solid #e0787f;
    border-bottom:4px solid #f0f0f0;
    border-left:4px solid #f0f0f0;
    border-radius:100%;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-75px;
    margin-top:-75px;
    animation:2.5s ease-in-out 0s normal none infinite rotateTwo;
    -webkit-animation:2.5s ease-in-out 0s normal none infinite rotateTwo;
}
animation（动画，强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes结合使用））

.inner-box {
    width:130px;
    height:130px;
    border-bottom:2px solid #99749d;
    border-top:2px solid #f0f0f0;
    border-right:2px solid #f0f0f0;
    border-left:2px solid #99749d;
    border-radius:100%;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-65px;
    margin-top:-65px;
    animation:2.5s linear 0s normal none infinite rotate;
    -webkit-animation:2.5s linear 0s normal none infinite rotate;
}

.text-box {
    width:120px;
    height:120px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-60px;
    margin-top:-60px;
    color:#cccccc;
    font-size:24px;
    line-height:120px;
    text-align:center;
    animation:4s linear 0s normal none infinite flash;
    -webkit-animation:4s linear 0s normal none infinite flash;
}

@-webkit-keyframes rotate {
    from {
    -webkit-transform:rotate(0deg)
}
to {
    -webkit-transform:rotate(360deg)
}
}@keyframes rotate {
    from {
    transform:rotate(0deg)
}
to {
    transform:rotate(360deg)
}
}@-webkit-keyframes rotateTwo {
    from {
    -webkit-transform:rotate(0deg)
}
to {
    -webkit-transform:rotate(-360deg)
}
}@keyframes rotateTwo {
    from {
    transform:rotate(0deg)
}
to {
    transform:rotate(-360deg)
}
}@-webkit-keyframes flash {
    from,50%,to {
    opacity:1;
}
25%,75% {
    opacity:0;
}
}@keyframes flash {
    from,50%,to {
    opacity:1;
}
25%,75% {
    opacity:0;
}
}
@-webkit-keyframes圆形图片360度不停旋转。
        </pre>
      </p>
      <video src="../assets/c3实例视频/动画展示.mp4" width="600px" controls></video>
        <img src="../assets/images/3.53.png" alt="">
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>